<template>
  <switch
    style="transform: scale(0.8)"
    :checked="internalValue"
    @change="switchChange($event)"
    :disabled="disabled"
  />
</template>
<script>
export default {
  name: "LiSwitch",
  props: {
    value: {},
    disabled: {
      type: Boolean,
      default: false,
    },
    tVal: {
      type: [Boolean, String, Number],
      default: true,
    },
    fVal: {
      type: [Boolean, String, Number],
      default: false,
    },
    color: {
      type: String,
      default: "#5ac725",
    },
  },
  data() {
    return {
      internalValue: this.value === this.tVal,
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal === this.tVal;
    },
  },
  methods: {
    switchChange(e) {
      this.$emit("input", e.detail.value ? this.tVal : this.fVal);
      this.$emit("change", {
        detail: {
          value: e.detail.value,
        },
      });
    },
  },
};
</script>
